<script setup lang="ts">
import { addUserAPI, deleteUserAPI, editUserAPI, getRoleList, getUserDetailAPI, getUserListAPI } from '@/api/system';
import type { addUserParams, RoleData, RoleUser, URow} from '@/types/system';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { onMounted, ref } from 'vue';

const params=ref<RoleUser>({
  page:1,
  pageSize:5,
  name:''
})
const UList= ref<URow[]>([]);
const total=ref<number>()
const createTime=ref<string[]>([])
const getEmployeeList=async ()=>{
  const res=await getUserListAPI(params.value)
  UList.value=res.data.rows
  total.value=res.data.total
  const promises = res.data.rows.map(async (item:URow) => {
    const time = await getUserDetailAPI(item.id)
    return time.data.createTime
  })
  createTime.value = await Promise.all(promises)
  UList.value.forEach((item:URow,index:number)=>{
    item.createTime=createTime.value[index]
  })
}

onMounted(()=>{
  getEmployeeList()
  getroleList()
})
const searchBuild=()=>{
  getEmployeeList()
  params.value.page=1
}
// 添加员工弹窗
const dialogVisible=ref(false)
const form=ref<addUserParams>({
  name:'',
  userName:'',
  phonenumber:'',
  roleId:null,
  status:null,
})
// 获取角色下拉列表
const roleList=ref<RoleData[]>([])
const getroleList=async ()=>{
  const res=await getRoleList()
  roleList.value=res.data
}
const rules=ref<FormRules<addUserParams>>({
  name:[{required:true,message:'请输入员工姓名',trigger:'blur'}],
  userName:[{required:true,message:'请输入登录账号',trigger:'blur'}],
  phonenumber:[{required:true,message:'请输入联系方式',trigger:'blur'}],
  roleId:[{required:true,message:'请选择角色',trigger:'blur'}],
  status:[{required:true,message:'请选择状态',trigger:'blur'}]
})
const formRef=ref<FormInstance>()
// 添加员工
const submitForm=async ()=>{
 await formRef.value?.validate()
 if(flag.value){
  const res=await editUserAPI({...form.value,id:flag.value})
  if(res.code===10000){
    ElMessage.success('修改成功')
    dialogVisible.value=false
    flag.value=undefined
    getEmployeeList()
  }else{
    ElMessage.error(res.msg)
  }
 }else{
  const res=await addUserAPI(form.value)
  if(res.code===10000){
  ElMessage.success('添加成功')
  dialogVisible.value=false
  getEmployeeList()
 }else{
  ElMessage.error(res.msg)
 }
 }

}
// 删除员工
const deleteEmployee=async (id:number)=>{
  console.log('id',id);
  const res=await deleteUserAPI(id)
  if(res.code===10000){
    ElMessage.success('删除成功')
    getEmployeeList()
  }else{
    ElMessage.error(res.msg)
  }
}
// 用户详情
const flag=ref<number>()
const getUserDetail=async (id:number)=>{
  const res=await getUserDetailAPI(id)
  form.value.name=res.data.name
  form.value.userName=res.data.userName
  form.value.phonenumber=res.data.phonenumber
  form.value.roleId=res.data.roleId
  form.value.status=res.data.status
  dialogVisible.value=true
  flag.value=res.data.id
}
const HideDialog=()=>{
  dialogVisible.value=false
  flag.value=undefined
  form.value.name=''
  form.value.userName=''
  form.value.phonenumber=''
  form.value.roleId=null
  form.value.status=null
}
</script>
<template>
  <div class="park-building-page">
    <div class="search-container">
      <div class="search-label">员工姓名</div>
      <el-input clearable placeholder="请输入内容" v-model="params.name" class="search-main" />
      <el-button type="primary" v-model="params.name" @click="searchBuild">查询</el-button>
    </div>
    <el-button type="primary" @click="dialogVisible=true">添加员工</el-button>
    <!-- 表格区域 -->
    <el-table :data="UList">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="name" label="员工姓名"></el-table-column>
      <el-table-column prop="userName" label="登录账号"></el-table-column>
      <el-table-column prop="phonenumber" label="联系方式"></el-table-column>
      <el-table-column prop="roleId" label="角色"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          {{ row.status === 1 ? '启用' : '停用' }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="180">

      </el-table-column>
      <el-table-column prop="address" label="操作" width="300">
        <template #default="{ row }">
          <el-button text type="primary" @click="getUserDetail(row.id)" >编辑</el-button>
          <el-button text @click="deleteEmployee(row.id)" >删除</el-button>
          <el-button text >重置密码</el-button>
        </template>
         </el-table-column>
    </el-table>
    <el-pagination
        :total="total"
        :page-sizes="[2, 3, 4, 5]"
        layout="total,sizes, prev, pager, next,jumper"
        v-model:current-page="params.page"
        v-model:page-size="params.pageSize"
        @change="getEmployeeList"
      />
      <!-- 添加员工弹窗 -->
      <div>
        <el-dialog
          v-model="dialogVisible"
          title="添加员工"
          width="30%"
          @close="HideDialog"
        >
        <div class="dialog-content">
          <el-form :model="form" label-position="top" :rules="rules" ref="formRef">
            <el-form-item label="员工姓名" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="登录账号" prop="userName">
              <el-input v-model="form.userName" />
            </el-form-item>
            <el-form-item label="联系方式" prop="phonenumber">
              <el-input v-model="form.phonenumber" />
            </el-form-item>
            <el-form-item >
              <text>默认密码：123456</text>
            </el-form-item>
            <el-form-item label="分配角色" prop="roleId">
              <el-select v-model="form.roleId as number" placeholder="请选择角色">
                <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId as number" />
              </el-select>
            </el-form-item>
            <el-form-item label="员工状态" prop="status">
             <el-radio-group v-model="form.status as number">
              <el-radio value="0" size="large">禁用</el-radio>
              <el-radio value="1" size="large">启用</el-radio>
            </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="HideDialog">取消</el-button>
        </template>
        </el-dialog>

      </div>
  </div>
</template>

<style lang="scss" scoped>
.park-building-page {
  height: 100%;
  padding: 20px;
}
.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 80px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.el-button {
  margin-top: 10px;
  margin-bottom: 10px;
}
.dialog-content{
  padding: 0px 70px;
 margin-top: 20px;
}
</style>
